<template>
  <div class="app-container">
    <el-row :gutter="80">
      <!-- <el-col :span="24" style="border-right: 1px solid #ddd; min-height: 600px;"> -->
      <el-col :span="10" style="min-height: 600px;">
        <div class="function-col">
          <el-tree
            :is-loading="treeLoading"
            :data="treeData"
            :props="treeProps"
            :expand-on-click-node="false"
            :render-content="renderContent"
            :highlight-current="true"
            default-expand-all
            empty-text="暂无数据"
            node-key="id"
            class="function-tree"
            @current-change="currentChange" />
        </div>
      </el-col>
      <!-- <el-col :span="6">
        <div class="detail-title">
          功能详情
        </div>
        <el-form v-if="detail.id" label-width="90px">
          <el-form-item label="功能名称：" >
            <span>{{ detail.sysName || '-' }}</span>
          </el-form-item>
          <el-form-item label="图标：" >
            <span>{{ detail.icon || '-' }}</span>
          </el-form-item>
          <el-form-item label="name属性：" >
            <span>{{ detail.name || '-' }}</span>
          </el-form-item>
          <el-form-item label="权限Code：" >
            <span>{{ detail.permissionCode || '-' }}</span>
          </el-form-item>
          <el-form-item label="PATH：" >
            <span>{{ detail.path || '-' }}</span>
          </el-form-item>
          <el-form-item label="状态：" >
            <el-tag v-if="detail.status">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </el-form-item>
          <el-form-item label="备注：" >
            <span>{{ detail.remark || '-' }}</span>
          </el-form-item>
        </el-form>
        <span v-else style="line-height: 36px;font-size: 14px;color: #606266;">暂无选中项</span>
      </el-col> -->
    </el-row>

  </div>
</template>

<script>
import { getFunctionTree, functionUpdateDisabled } from '@/api/systemManage/function'
import waves from '@/directive/waves' // Waves directive

export default {
  name: 'UserManage',
  directives: { waves },
  data() {
    return {
      treeLoading: true,
      treeData: [],
      treeProps: {
        label: 'sysName'
      },
      detail: {}
    }
  },
  computed: {
  },
  created() {
    this.getFunction()
  },
  methods: {
    getFunction() {
      this.treeLoading = true
      getFunctionTree({ type: 2 }).then(res => {
        this.treeLoading = false
        if (res.code === 200) {
          this.treeData = res.data
        } else this.$message.error(res.message)
      }).catch(e => {
        this.treeLoading = false
        this.$message.error(this.$store.getters.errorMsg)
      })
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class='function-tree-node'>
          <span>{data.sysName}</span>
          <span class='rightBtn'>
            <el-button size='mini' plain type={
              data.status === 1 ? 'warning' : 'primary'
            } on-click={ () => this.functionEnable(data) }>{data.status === 1 ? '禁用' : '启用'}</el-button>
          </span>
        </span>)
    },
    currentChange(data) {
      this.detail = data
    },
    functionEnable(item) {
      const enable = item.status === 1 ? 0 : 1
      functionUpdateDisabled(item.id, enable).then(res => {
        if (res.code === 200) {
          this.$message.success(`已${enable === 1 ? this.$store.getters.lang.systemManage.function.operationBtn.enabled : this.$store.getters.lang.systemManage.function.operationBtn.disabled}`)
          this.getFunction()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(this.$store.getters.errorMsg)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.detail-title{
  line-height: 50px;
  color: #666;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px dashed #ddd;
}
.function-col{
  padding: 20px;
  border-radius: 4px;
  min-height: 500px;
  border: 1px solid #ddd;
  transition: box-shadow .2s;
  &:hover{
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1)
  }
}
</style>

<style lang="scss">
.function-tree{
  &>.el-tree-node{
    &>.el-tree-node__content{
        border-top: 1px solid #f1f1f1;
      &>.el-tree-node__expand-icon{
        display: none !important;
      }
      &>.function-tree-node {
        padding-left: 10px;
      }
    }
    &:first-child{
      &>.el-tree-node__content{
        border-top: none;
      }
    }
  }
  .el-tree-node{
      &>.el-tree-node__content{
          height: 50px;
          .el-tree-node__expand-icon{
              font-size: 16px;
          }
      }
  }
  .function-tree-node{
      font-size: 14px;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      padding-right: 15px;
      .rightBtn{
        // display: none;
      }
      &.custom-tree-node--is-active>.rightBtn{
        display: block;
      }
      .text-danger{
        color: #f56c6c;
      }
  }
}
</style>
